<template>
  <div :class="['input-department', { clearable: clearable && (name || (value && value.length)) }]">
    <slot v-if="multiple" name="multiple" :departments="departments" :instance="this" :show-picker="showPicker">
      <TagRender
        :tags="departments"
        :enable="!inputDisabled"
        :transfer="tagTransfer"
        @add="showPicker"
        @close="remove" />
    </slot>
    <slot v-else :id="id" name="single" :department-name="name" :instance="this" :show-picker="showPicker">
      <ElInput
        :placeholder="inputDisabled ? '--' : placeholder"
        readonly
        :size="size"
        suffix-icon="el-icon-search"
        :value="name"
        :disabled="inputDisabled"
        @click.native="showPicker">
        <template v-if="(name || (value && value.length)) && clearable && !inputDisabled" #append>
          <i class="el-icon-error" title="清空" @click.stop="clear"></i>
        </template>
      </ElInput>
    </slot>
    <DepartmentPicker
      :id="nodeId"
      :key="nodeId"
      :ou-type="ouType"
      :check-strictly="checkStrictly"
      :ignore="ignore"
      :visible.sync="show"
      :pre-selected-users="preSelectedUsers"
      :is-multiple="multiple"
      @confirm="confirm" />
  </div>
</template>

<script>
  export default {
    name: 'InputDepartment',
    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },
    props: {
      id: [Number, String],
      nodeId: [Number, String],
      name: String,
      ouType: String,
      ignore: {
        type: Boolean,
        default: false
      },
      size: String,
      value: Array,
      clearable: Boolean,
      multiple: Boolean,
      checkStrictly: Boolean,
      disabled: Boolean,
      tagTransfer: {
        type: Function,
        default(value) {
          value.name = value.ouName || value.name || value.label
          return value
        }
      },
      transfer: {
        type: Function,
        default: value => value
      },
      filter: {
        type: Function,
        default: value => true
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      preSelectedUsers: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        show: false,
        departments: []
      }
    },
    computed: {
      inputDisabled() {
        return this.disabled || (this.elForm || {}).disabled
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(newVal) {
          this.departments = [...(newVal || [])]
        }
      }
    },
    methods: {
      showPicker() {
        if (!this.inputDisabled) {
          this.show = true
        }
      },
      remove(item, index) {
        this.departments.splice(index, 1)
        this.$emit('input', this.departments)
        this.$emit('on-remove', item, index)
      },
      confirm(departments) {
        if (this.multiple) {
          const filtered = departments.filter(this.filter)
          const map = filtered.map(this.transfer)
          this.$emit('input', map)
          this.$emit('on-confirm', filtered, map)
          this.elForm && this.elFormItem && this.elForm.clearValidate([this.elFormItem.prop])
        } else {
          if (this.filter(departments)) {
            this.$emit('update:id', departments.id)
            this.$emit('update:name', departments.name || departments.ouName || departments.label)
            this.$emit('input', [departments])
            this.elForm && this.elFormItem && this.elForm.clearValidate([this.elFormItem.prop])
          }
        }
      },
      clear() {
        this.$emit('update:id', null)
        this.$emit('update:name', null)
        this.$emit('input', [])
      }
    }
  }
</script>

<style lang="scss">
  .input-department {
    &.clearable {
      .el-input-group__append {
        padding: 0 6px 0 0;
        color: #c0c4cc;
        background-color: #fff;
        border-left: none;
      }

      .el-input__inner {
        border-right: none;

        &:focus {
          + .el-input__suffix + .el-input-group__append {
            border-color: var(--color-primary);
          }
        }
      }

      .el-icon-error {
        cursor: pointer;
      }
    }
  }

  .el-form-item.is-error {
    .el-input-group__append {
      border-color: var(--color-primary);
    }
  }
</style>
